<!-- 我的消息页面 -->
<template>
	<view class="email">
		<view class="tab-page">
			<view class="tab">
				<u-tabs :list="tabList" :current="current" bar-width="63" @change="change" bg-color="#f9f9f9" style="padding: 20rpx 0;"></u-tabs>
			</view>
			
			<view class="page-content">
				<scroll-view class="scroll-view" scroll-y @scrolltolower="scrolltolower()">
					<view v-for="(item,index) in messageList" :key="index">
						<view class="email-card" @click="toDetail(item)">
							<view class="left">通知</view>
							<view class="middle">
								<view class="middle-top">{{item.msgName}}</view>
								<view class="middle-bottom">{{$u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
							</view>
							<u-icon name="arrow-right" color="#cfcfcf" size="38"></u-icon>
						</view>	
					</view>
					<view class="bootom-box">
						<load-more :visible="loadMore "></load-more>
						<om-nomore :visible="noMoreFlag && !noData1" bgcolor="#f9f9f9"></om-nomore>
					</view>
					<tui-no-data imgUrl="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/Open_source_project/mine/empty_bg.png" v-if="noData1">暂无数据</tui-no-data>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{           // tab选项列表
					name: '全部'
				}, {
					name: '规则相关'
				}, {
					name: '处罚警告'
				},{
					name: '财务相关'
				},{
					name: '上新功能'
				},{
					name: '通知相关'
				},{
					name: '商品相关'
				},{
					name: '投诉建议'
				}],
				messageList:[],
				current: 0,           // 指定第一页为初始页面
				currentPage: 1,       //分页
				total: 0,             //数据总数
				loadMore: false,      //数据加载中
				noMoreFlag: false,    //没有更多数据了
				noData1: false,       //没有数据
			};
		},
		onShow() {
			this.clear();
			this.getMessage()
		},
		methods: {
			//顶部section改变
			change(index) {
				this.current = index;
				this.clear();
				this.getMessage()
			},
			//获得消息
			getMessage(){
				this.loadMore = true;
				//查询不同交付状态的订单     
				let formData = this.current == 0 ? {currentPage:this.currentPage} : {currentPage:this.currentPage,msgType: this.current};
				this.$http.post('/api/auth/message/list',formData).then(res => {
					this.loadMore = false;
					this.total = res.data.total;
					if(this.total == 0) return this.noData1 = true;
					this.messageList = this.messageList.concat(res.data.rows)
				})
			},
			//切换tab，重新请求，需清空原有数据
			clear(){
				this.messageList = [];
				this.noData1 = false;
				this.noMoreFlag = false;
				this.currentPage = 1;
				this.total = 0
			},
			//触底
			scrolltolower(){
				if(this.total == this.messageList.length) return this.noMoreFlag = true;
				this.currentPage++;
				this.getRecord()
			},
			// 跳转详情页
			toDetail(item){
				uni.navigateTo({url:'./email-detail'});
				//先跳转页面，在通过嵌套$emit传数据
				uni.$once('need',() => {
					uni.$emit('detail',item)
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.tab-page{
		.tab{
			z-index: 2;
			position: fixed;
			width: 100vw;
		}
		.page-content{
			padding-top: 70rpx;
			height: calc(100% - 184rpx);
			.scroll-view{
				height: 100%;
			}
		}
	}
	
	.email-card{
		display: flex;
		height: 140rpx;
		border-bottom: 1px solid #e5e5e5;
		.left{
			height: 40rpx;
			width: 80rpx;
			margin: auto 32rpx;
			text-align: center;
			color: #e45669;
			line-height: 40rpx;
			font-size: 12px;
			border-radius: 10rpx;
			background-color: rgba($color: #febbc0, $alpha: .3);;
		}
		.middle{
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			width: 550rpx;
			padding: 20rpx;
			.middle-top{
				width: 100%;
				margin-bottom: 20rpx;
				font-weight: 700;
				font-size: 15px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.middle-bottom{
				color: #a6a7a6;
			}
		}
		.right{
			position: relative;
			top: 67rpx;
			width: 0;
			height: 0;
			border: 6rpx solid #f46753;
			border-radius: 10rpx;
		}
	}
	
	.bootom-box{
		height: 120rpx;
	}
</style>